<template>
  <div class="app-container">
    <el-row :gutter="15">
      <el-col style="margin-bottom: 10px">
        <el-card class="box-card" shadow="never">
          <div slot="header" class="clearfix">
            <span class="role-span">代理商信息</span>
            <!--
            <el-button :loading="columnLoading" icon="el-icon-check" type="primary"
                  size="mini" style="float: right; padding: 6px 9px;margin-right: 9px">
              保存
            </el-button>
            -->
          </div>

          <el-dialog :append-to-body="true" :close-on-click-modal="false" :before-close="cancel" :visible.sync="dialog" title="新增成员信息" width="500px">
            <el-form ref="form" :model="form" :rules="rules" size="small" label-width="100px">
              <el-form-item label="成员名称" prop="agentName">
                <el-input v-model="form.agentName" style="width: 350px;" />
              </el-form-item>
              <el-form-item label="手机号码" prop="phone">
                <el-select v-model="form.phone" style="width: 350px" 
                    placeholder="请选择手机号码" @change="getMemberUser" clearable filterable>
                  <el-option
                  v-for="(item, index) in users"
                  :key="item.phone + index"
                  :label="item.phone"
                  :value="item.phone"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="联系人" prop="contacts">
                <el-input v-model="form.contacts" style="width: 350px;" />
              </el-form-item>
              <el-form-item label="联系地址" prop="address">
                <el-input v-model="form.address" style="width: 350px;" />
              </el-form-item>
              <el-form-item label="分成比例(%)" prop="commissionRatio">
                <el-input type="number" v-model="form.commissionRatio" style="width: 350px;" />
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button type="text" @click="cancel">取消</el-button>
              <el-button :loading="loading" type="primary" @click="doSubmit">确认</el-button>
            </div>
          </el-dialog>

          <el-form size="small" label-width="90px">
            <el-table v-loading="loading" :data="data" :max-height="tableHeight"
                                          size="small" style="width: 100%;margin-bottom: 15px">
              <el-table-column prop="agentName" label="代理商名称"/>
              <el-table-column prop="phone" label="手机号码"/>
              <el-table-column prop="contacts" label="联系人"/>
              <el-table-column prop="address" label="联系地址"/>
              <el-table-column prop="imgUrl" label="营业执照预览图">
                <template slot-scope="{row}">
                  <el-image
                    :src="row.imgUrl"
                    :preview-src-list="[row.imgUrl]"
                    fit="contain"
                    lazy
                    class="el-avatar"
                  >
                    <div slot="error">
                      <i class="el-icon-document" />
                    </div>
                  </el-image>
                </template>
              </el-table-column>
              <el-table-column prop="createTime" label="创建时间"/>
            </el-table>
          </el-form>
        </el-card>
      </el-col>
      
      <!-- 成员详情列表 -->
      <el-col>
        <el-card class="box-card" shadow="never">
          <div slot="header" class="clearfix">
            <span class="role-span">成员信息</span>
            <el-button size="mini" style="margin-right: 2px; float: right;" 
                  v-permission="['admin', 'agentMember:add']"
                  icon="el-icon-plus" type="primary" @click="showAddFormDialog()">
              新增成员
            </el-button>
          </div>
          <memberDetail ref="memberDetail" />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getAllMemberUser } from '@/api/memberUser'
import checkPermission from '@/utils/permission'
import crud from '@/mixins/crud'
import memberDetail from './memberDetail'
import { add } from '@/api/agentMember'

export default {
  name: 'editAgentMember',
  components: { memberDetail },
  mixins: [crud],
  data() {
    return {
      users: [],
      activeName: 'first', tableHeight: 550, columnLoading: false, configLoading: false, syncLoading: false, genLoading: false,
      form: {id: null, pid: null, isDel: null, createTime: null, updateTime: null, agentName: null, phone: null, address: null, contacts: null, imgUrl: null, commissionRatio: null},
      rules: {
          agentName: [
              { required: true, message: '成员名称不能为空', trigger: 'blur' },
              { min: 1, max: 100, message: '长度在 1 到 100 个字符', trigger: 'blur' }
          ], 
          phone: [
              { required: true, message: '手机号不能为空', trigger: 'blur' },
              { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
          ], 
          commissionRatio: [
              { required: true, message: '分成比例不能为空', trigger: 'blur' },
              { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
          ]
      }
    }
  },
  mounted() {
    this.$nextTick(function(){
        //调用需要执行的方法
        this.handleCurrentChange()
        this.getMemberUser()
    }) 
  },
  created() {
    this.tableHeight = document.documentElement.clientHeight - 385
    this.id = this.$route.params.id
    this.$nextTick(() => {
      this.init()
    })
  },
  methods: {
    checkPermission,
    getMemberUser() {
        getAllMemberUser().then(res => {
            this.users = res
        }).catch(() => { })
    },
    beforeInit() {
      this.url = 'api/agentMember'
      const id = this.id
      this.params = { 'id': id }
      return true
    },
    add() {
      this.isAdd = true
      this.$refs.form.dialog = true
    },
    cancel() {
      this.resetAddForm()
    },
    doSubmit() {
      this.loading = true
      this.doAdd()
    },
    doAdd() {
      this.form.pid = this.$route.params.id;
      add(this.form).then(res => {
        this.resetAddForm()
        this.$notify({
          title: '添加成功',
          type: 'success',
          duration: 2500
        })
        this.loading = false
        this.handleCurrentChange()
      }).catch(err => {
        this.loading = false
        console.log(err.response.data.message)
      })
    },
    resetAddForm() {
      this.dialog = false
      this.$refs['form'].resetFields()
      this.form = {
        id: null, pid: null, isDel: null, createTime: null, updateTime: null, 
        agentName: null, phone: null, address: null, 
        contacts: null, imgUrl: null, commissionRatio: null
      }
    },
    // 选中代理商后，设置代理商成员详情数据
    handleCurrentChange() {
      this.$refs.memberDetail.init()
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
  .edit-input {
    .el-input__inner {
      border: 1px solid #e5e6e7;
    }
  }
</style>

<style scoped>
  /deep/ .input-with-select .el-input-group__prepend {
    background-color: #fff;
  }
</style>
